<template>
  <style>
    :host {
      color: #dd4633;
      font: 18px Arial, sans-serif;
    }
  </style>
  {{text}}, <span>{{text3}}</span>
  <br/>
  {{text2}}
  <input type="text" [model]="text2" (change)="onTextChange($event)">
</template>

<script>
  oan.Component({
    is: "di-li",
    data: {
      text: "Hello, ",
      text2: "World"
    },
    methods: {
      world: function ($event) {
        console.log("world", $event);
      },
      onTextChange: function ($event) {
        console.log("onTextChange");
      }
    },
    ready: function () {
      console.log('di li ready');
    },
    connected: function () {
      this.text = 'Hello...';

      console.log('di-li connected')
    },
  });
</script>
